<template>
  <div>
    <!-- 菜单组件 -->
    <div class="h-menu">
      <head-menu
        @childrenrouterpush="carrouterpush"
        @jump="jumpdiv"
        id="h-menu"
      ></head-menu>
    </div>
    <div v-if="isgettrue">
      <!-- 汽车轮播图标签 -->
      <swapper-car
        :id="id"
        class="swapper-item"
        @buycar="buycar"
        @addcart="addcart"
        ref="swapperview"
      ></swapper-car>

      <!-- 小标签 -->
      <p class="comment-p">
        Not all features may be available. Contact your dealer for more
        information.
      </p>
      <!-- 汽车名称 价格 -->
      <div class="car-name" id="3">{{ carmessage.deal }}</div>
      <div class="car-price">{{ carmessage.price }}</div>
      <!-- 汽车卡片组件 -->
      <car-card :id="id"></car-card>
      <!-- 汽车参数表格 -->

      <car-table id="4"></car-table>
      <!-- 汽车商品页面底部div -->
    </div>
    <div v-else class="no-found-item">
      <div class="no-found-img">
        <div class="no-found-img-body">
          <img src="http://192.168.2.27:8888/assets/ikun.jpg" alt="" />
        </div>
      </div>
      <div class="no-found-mess">
        <div class="no-found-mess-div">
          <span class="no-found-head">404</span>
          <span class="no-found-head2">UH OH!页面丢失</span>
          <span>您所寻找的商品页面不存在，可以点击下方按钮返回首页</span>
          <el-button @click="back">返回首页</el-button>
        </div>
      </div>
    </div>

    <bottom-view id="5"></bottom-view>
    <el-dialog v-model="cartVisible" title="添加购物车" width="60%">
      <el-row class="dialog_head">
        <el-col :span="14">
          <img :src="cartimg" v-if="imgget" alt="" />
        </el-col>
        <el-col :span="10" class="dialog_info">
          <span class="cart_deal_span">{{ carmessage.deal }}</span>
          <span class="cart_price_span">{{ carmessage.price }}</span>
        </el-col>
      </el-row>
      <el-row class="num_row">
        <el-col :span="8">
          <span>商品数量:</span>
          <el-input-number v-model="cartnum" :min="1" />
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="checkadd"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import HeadMenu from "components/content/HeadMenu.vue";
import SwapperCar from "components/content/SwapperCar.vue";
import BottomView from "components/bottom/BottomView.vue";
import CarTable from "components/content/CarTable.vue";
import CarCard from "components/content/CarCard.vue";

//request请求
import { request, getuserinfo, pushcartlist } from "network/request.js";
// import { ElMessage } from "element-plus";
import { ElNotification } from "element-plus";
export default {
  inject: ["reload"],
  components: {
    HeadMenu,
    SwapperCar,
    BottomView,
    CarTable,
    CarCard,
    // NewHead
  },
  data() {
    return {
      //记录传入车辆ID
      id: "",
      //通过id查询将选中车辆信息存入carmessage中
      carmessage: {},
      isgettrue: true,
      cartVisible: false,
      cartimg: "",
      imgget: false,
      //加入购物车商品数量
      cartnum: 0,
      userid: "",
      cartlist: [],
    };
  },
  created() {
    this.id = this.$route.query.id;
  },
  mounted() {
    request(this.id)
      .then((res) => {
        // console.log(res.data[0]);
        this.carmessage = res.data[0].carmessage;

        // this.swapperimglist1 = res.data[0]
      })
      .catch(() => {
        this.isgettrue = false;
      });
    //进入页面后将页面高度设为0
    document.documentElement.scrollTop = 0;
  },
  methods: {
    //跳转路由
    carrouterpush(index) {
      // console.log(index)
      let pushid = this.salelist[index].id;
      this.$emit("ischange");
      // location.reload()
      //路由push以后 调用nextTick更新页面
      this.$router.push({ path: "/cardeal", query: { id: pushid } });

      this.$nextTick(function () {
        this.reload();
      });
    },
    //接收菜单头部传递事件 页面高度跳转
    jumpdiv(key) {
      //元素距离顶部位置
      let offsetTop = document.getElementById(key).offsetTop;
      //当前位置与顶部距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(scrollTop) //1234
      // console.log(offsetTop) //475
      // let centerpx = 0
      // let ispeed = 0
      let menuheight = document.getElementById("h-menu").scrollHeight;
      let timer = null;
      //第一种情况 当前距离大于元素距离
      if (key == "5") {
        document.getElementById(key).scrollIntoView();
      } else {
        if (scrollTop > offsetTop) {
          // centerpx = scrollTop - offsetTop
          // ispeed = Math.floor(centerpx/5)
          // let i = 0
          timer = setInterval(() => {
            // ++i
            document.documentElement.scrollTop -= 20;
            // document.documentElement.scrollTop  -= ispeed
            if (document.documentElement.scrollTop <= offsetTop - menuheight) {
              clearTimeout(timer);
              timer = null;
              // console.log(i)
            }
          }, 15);
          // i = 0
        } else {
          //第二种情况 当前距离小于元素距离
          // centerpx = offsetTop - scrollTop
          timer = setInterval(() => {
            // i++
            document.documentElement.scrollTop += 20;
            // document.documentElement.scrollTop  -= ispeed
            if (document.documentElement.scrollTop >= offsetTop - menuheight) {
              clearTimeout(timer);
              timer = null;
            }
          }, 5);
        }
      }
    },
    back() {
      this.$router.push("/home");
    },
    buycar() {
      if (localStorage.getItem("token")) {
        this.$router.push({ path: "/carbuy", query: { id: this.id } });
      } else {
        ElNotification({
          title: "Warning",
          message: "请先登录账号~",
          type: "warning",
          zIndex: 100,
          offset: 80,
        });
      }
    },
    //打开添加购物车页面
    async addcart() {
      if (localStorage.getItem("token")) {
        this.cartVisible = true;
        let token = localStorage.getItem("token");
        await request(this.id).then(({ data: res }) => {
          console.log(res[0].dealswapperlist[0]);
          this.cartimg = res[0].dealswapperlist[0].url;
          this.imgget = true;
        });
        await getuserinfo(token).then(({ data: res }) => {
          console.log(res);
          this.userid = res[0].id;
          if (res[0].cartlist) {
            res[0].cartlist.forEach((item) => {
              this.cartlist.push(item);
            });
          }
        });
      } else {
        ElNotification({
          title: "Warning",
          message: "请先登录账号~",
          type: "warning",
          zIndex: 100,
          offset: 80,
        });
      }
    },
    //添加到购物车中
    async checkadd() {
      //判断购物车列表中是否已经存在过该商品
      if (
        this.cartlist.some((item) => {
          if (item.goodid == this.id) return true;
        })
      ) {
        this.cartlist[
          this.cartlist.findIndex((target) => target.goodid == this.id)
        ].goodnum += this.cartnum;
      } else {
        let cart = {
          goodid: this.id,
          goodnum: this.cartnum,
        };
        this.cartlist.push(cart);
      }
      await pushcartlist(this.userid, this.cartlist).then(() => {
        this.cartVisible = false;
        // ElMessage.success("成功添加到购物车!");
        ElNotification({
          title: "Success",
          message: "成功添加到购物车~",
          customClass: "cart-message",
          type: "success",
          zIndex: 100,
          offset: 80,
        });
        this.reload();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.h-menu {
  position: fixed;
  top: 0;
  width: 100%;
  /* height: 200px; */
  background-color: #00142e;
  box-sizing: border-box;
  /* overflow: hidden; */
  z-index: 10000;
}
.h-menu:hover {
  // background-color: rgba(0,20,47,.6);
  background-color: rgba(255, 255, 255, 0.1);
}
.swapper-item {
  margin-top: 100px;
}
.comment-p {
  /* background-color: red; */
  text-align: center;
  font-size: 12px;
  font-weight: lighter;
  color: #333;
}
.car-name {
  width: 50%;
  margin: 0 auto;
  // background-color: blue;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: #1b394e;
  margin-top: 1%;
}
.car-price {
  width: 18%;
  margin: 0 auto;
  /* background-color: blue; */
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  color: #0276b3;
  margin-top: 1%;
  border-radius: 8px;
  transition: 0.5s linear;
  transform-origin: center;
}
.car-price:hover {
  color: white;
  background-color: #0276b3;
}
.no-found-item {
  margin: 80px auto 0;
  width: 1000px;
  height: 500px;
  // background-color: red;
  display: flex;
  box-sizing: border-box;
}
.no-found-img {
  width: 30%;
  // height: 100%;
  // background-color: skyblue;
  height: 300px;
  margin: auto;
  .no-found-img-body {
    width: 300px;
    height: 300px;
    margin: auto;
    // background-color: yellow;
    img {
      width: 100%;
      height: 100%;
      vertical-align: top;
      border-radius: 50%;
    }
  }
}
.dialog-footer .el-button {
  padding: 0 10px;
  width: 100px;
  letter-spacing: 2px;
}
.dialog_head {
  // height: 100px;
  // background: red;

  .dialog_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    > span {
      display: block;
      text-align: center;
    }
    .cart_deal_span {
      font-size: 35px;
      font-weight: 700;
      text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
    }
    .cart_price_span {
      margin-top: 20px;
      font-size: 30px;
      font-weight: 600;
      color: orange;
    }
  }
  img {
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
}
.num_row {
  margin-top: 50px;
  width: 100%;
  // background-color: red;
  justify-content: flex-end;
  > .el-col {
    justify-content: end;
    display: flex;
    align-items: center;
  }
  .el-input {
    width: 100%;
  }
}
.no-found-mess {
  width: 70%;
  height: 100%;
  // background-color: lightgreen;
  .no-found-mess-div {
    width: 100%;
    height: 300px;
    // background-color: yellow;
    margin: 100px auto;
    padding-left: 20px;
    span {
      width: 40%;
      display: block;
      // background-color: skyblue;
      margin-bottom: 20px;
      font-size: 16px;
      // line-height: 20px;
    }
    .no-found-head {
      font-size: 100px;
      font-weight: 700;
    }
    .no-found-head2 {
      font-size: 28px;
      font-weight: 700;
    }
    .el-button {
      width: 30%;
      height: 50px;
      line-height: 50px;
      border-radius: 20px;
      background-color: #fff;
      border: 5px solid lightgreen;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }
}
@media screen and (max-width: 768px) {
  .comment-p {
    width: 90%;
    margin: 10px auto 0;
    font-size: 12px;
  }
  .car-name {
    width: 90%;
    letter-spacing: 4px;
    font-size: 36px;
    font-weight: 700;
  }
  .car-price {
    width: 40%;
    margin-bottom: 3%;
    height: 40px;
    line-height: 40px;
  }
}
</style>